<!--
 * @Descripttion: 
 * @version: 
 * @Author: by
 * @Date: 2021-05-24 15:14:42
 * @LastEditors: jgg
 * @LastEditTime: 2022-01-06 11:30:32
-->
<template>
    <div class="about">
        <v-header />
        <v-sidebar />
        <div class="content-box" :class="{ 'content-collapse': collapse }">
            <!-- <img @click="collapseChage" class="collapse-img" :src="!collapse?leftImg:rightImg" alt=""> -->
            <!-- <v-tags></v-tags> -->
            <div class="content">
                <router-view></router-view>
                <!-- <router-view v-slot="{ Component }">
                    <transition name="move" mode="out-in">
                        <keep-alive :include="tagsList">
                            <component :is="Component" />
                        </keep-alive>
                    </transition>
                </router-view> -->
                
                <!-- <el-backtop target=".content"></el-backtop> -->
            </div>
        </div>
    </div>
</template>
<script>
import vHeader from "../components/Header";
import vSidebar from "../components/Sidebar";
// import vTags from "../components/Tags.vue";
export default {
    components: {
        vHeader,
        vSidebar,
        // vTags
    },
    data() {
        return {
            breadList: [],
            currentPath: '',
            leftImg: require('@/assets/img/left.png'),
            rightImg: require('@/assets/img/right.png'),
        }
    },
    computed: {
        tagsList() {
            return this.$store.state.local.tagsList.map(item => item.name)
        },
        collapse() {
            return this.$store.state.local.collapse;
        }
    },
   
    methods: {
        getBreadcrumb() {
            this.currentPath = this.$route.path
            this.breadList = this.$route.matched
        },
    }

}
</script>

<style lang="scss" scoped>
.breadcrumb {
    padding: 10px 20px;
}
.active {
    color: #409EFF;
}
</style>
